<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./first/js/swiper-bundle.min.css">
    <link rel="stylesheet" href="./first/iconfont/iconfont.css">
    <script src="./first/js/moblie.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        /* 首页导航栏 */
        html {
            overflow: hidden;
            height: 100%;
        }

        body {
            height: 100%;
            overflow: auto;
        }

        .first {
            background-color: rgb(245, 245, 245);
            display: flex;
            display: -webkit-flex;
            min-height: 100vh;
            flex-direction: column;
        }

        .home {
            width: 100%;
            height: 3.75rem;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin: 0 auto;
            padding-top: 1rem;
            background-color: rgb(255, 255, 255);
            display: flex;
            justify-content: space-between;
            
            position: absolute;
            top: 0;
            z-index: 5;

        }

        .chinese {
            font-size: 1.75rem;
            color: rgb(76, 76, 76);
            margin-left: 1.25rem;
        }

        .nav {
            display: flex;
        }

        .man {
            width: 5.78rem;
            height: 3.0137rem;
            color: black;
            background-color: rgb(255, 255, 255);
            border: 1px solid rgb(224, 224, 224);
            border-radius: 1rem;
            text-align: center;
            line-height: 3.0137rem;
        }

        .woman {
            width: 5.78rem;
            height: 3.0137rem;
            color: rgb(128, 128, 128);
            background-color: rgb(224, 224, 224);
            border-radius: 1rem;
            text-align: center;
            line-height: 3.0137rem;
            margin-left: -2px;
        }

        .app {
            font-size: 1.75rem;
            font-weight: bold;
        
        }

        /* 导航栏2 */
        .tieup {

            position: fixed;
            top: -15px;
        }

        .tieup2 {
            width: 100vw;
            background-color: rgb(255, 255, 255);
            margin-top: 6.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            overflow: scroll;
            overflow: auto;
        }

        .tieup2::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }

        .tieup2 div {

            flex-shrink: 0;
            width: 7.9rem;
            height: 3.5rem;
            line-height: 3.5rem;
            text-align: center;
            background-color: rgb(245, 245, 245);
            border-radius: 1rem;
            font-size: 1.7rem;
           
            margin-left: 1.25rem;
            margin-top: 1.25rem;
            margin-bottom: 1.25rem;
        }
        .tieup2 div a{
             color: rgb(128, 128, 128);
        }

        .tieup2 div:nth-child(9) {
            margin-right: 1.25rem;
        }

        .tieup2 div:hover {
            color: rgb(229, 53, 62);
            background-color: rgb(255, 230, 231);
        }

        /* 中间 */
       

        /* 月票榜 */
        .list {
            background-color: rgb(255, 255, 255);
            border-radius: 1.25rem;
            width: 40.8875rem;
            margin: 1.875rem auto;
            padding-bottom: 1.5rem;
        }

        .ticket {
            border-top-left-radius: 1.25rem;
            border-top-right-radius: 1.25rem;
            color: rgb(111, 71, 33);
            background-color: rgb(254, 226, 183);
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 4.5rem;
        }

        .small {
            display: flex;
        }

        .webp img {
            width: 6.23rem;
            height: 8.2387rem;
            padding-top: 1.25rem;
            padding-left: 1.25rem;
        }

        .more {
            margin-left: 1rem;
        }

        .more div:nth-child(1) {
            font-size: 2rem;
            font-weight: bold;
            display: flex;
            margin-top: 2rem;
            text-align: center;
        }

        .more div:nth-child(2) {
            color: rgb(173, 173, 173);
            margin-top: 1rem;
            font-size: 1.675rem;
        }

        .gure {
            width: 2rem;
            height: 2rem;
            text-align: center;
            line-height: 2rem;
            color: white;
            background-color: rgb(253, 109, 118);
            border-top-left-radius: 5px;
            border-bottom-right-radius: 5px;
            margin-top: 2.5rem;
            margin-left: 1.25rem;
        }

        .gure2 {
            margin-top: 2.5rem;
            margin-left: 1.25rem;
            font-weight: bold;
            color: rgb(173, 173, 173);
        }

        .mine {
            width: 36.3738rem;
            height: 4.0187rem;
            background-color: rgb(245, 245, 245);
            border-radius: 2rem;
            margin: 1.25rem auto 0;
            text-align: center;
        }

        .mine span {

            line-height: 4.0187rem;
            font-size: 2rem;
            font-weight: bold;
        }

        /* 畅销榜 */
        /* 立即登录 */
        .login {
            width: 51.05rem;
            height: 7.21rem;

            text-align: center;
            line-height: 7.21rem;
            border-bottom: 1px solid rgb(204, 204, 204);
        }

        .login span {
            font-size: 2rem;
            font-weight: bold;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

        }

        .login a {
            font-size: 2rem;
            color: rgb(66, 132, 237);
        }

        /* qq阅读 */
        .read {

            line-height: 8.75rem;
            display: flex;
            justify-content: space-around;
            align-items: center;

        }

        .read div {
            font-size: 2rem;
            color: rgb(150, 155, 163);
        }

        /*  */
        .touch {

            line-height: 8.75rem;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .touch div {
            font-size: 2rem;
            color: rgb(150, 155, 163);
        }

        .touch div:hover {
            color: black;
        }

        /*  */
        .ser {

            text-align: center;
            font-size: 1.75rem;
            color: rgb(150, 155, 163);
            margin-bottom: 4.55rem;
        }

        /* 尾页 */
        .tail {
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: rgb(255, 255, 255);
            display: flex;
            justify-content: center;
            align-items: center;
        
        }

        .below {
            margin: 0 auto;
            width: 42.8813rem;
            text-align: center;
            background-color: rgb(250, 56, 68);
            border-radius: 2.25rem;

        }

        .below span {
            color: white;
            font-size: 1.75rem;
            line-height: 4.2188rem;
        }
        .yue{
            margin-top: 12.5rem;
        }
    </style>
</head>

<body>
    <div class="first">
        <!-- 首页导航栏 -->
        <div class="home">
            <div class="chinese"><span class="iconfont icon-youjiantou1"></span>排行榜</div>
            <div class="nav">
                <div class="man">男生</div>
                <div class="woman">女生</div>
            </div>
            <div class="app"><span class="iconfont icon-sousu"></span>
                <span class="iconfont icon-wu"></span>
            </div>
        </div>
        <!-- 导航栏2 -->
        <div class="tieup">
            <div class="tieup2">
                <div><a href="#ran">月票榜</a></div>
                <div><a href="#ran2">畅销榜</a></div>
                <div><a href="#ran3">阅读榜</a></div>
                <div><a href="#ran4">书友榜</a></div>
                <div><a href="#ran5">推荐榜</a></div>
                <div><a href="#ran6">更新榜</a></div>
                <div><a href="#ran7">签约榜</a></div>
                <div><a href="#ran8">新书榜</a></div>
                <div><a href="#ran9">新人榜</a></div>
            </div>

        </div>
        <!-- 中间 -->
        
            <!-- 月票榜 -->
            <div class="yue">
            <div class="list" id="ran">
                <div class="ticket">（月票榜）</div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（1）.webp"></div>
                    <div class="gure">1</div>
                    <div class="more">
                        <div>灵魂行者</div>
                        <div>卖报小郎君 · 科幻 · 265.77万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（6）.webp"></div>
                    <div class="gure">2</div>
                    <div class="more">
                        <div>诡秘之主</div>
                        <div>爱潜水的乌贼 · 玄幻 · 446.53万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（3）.webp"></div>
                    <div class="gure">3</div>
                    <div class="more">
                        <div>光阴之外</div>
                        <div>耳根 · 仙侠 · 209.24万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（7）.webp"></div>
                    <div class="gure2">4</div>
                    <div class="more">
                        <div>火力为王</div>
                        <div>如水意 · 都市 · 231.8万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（2）.webp"></div>
                    <div class="gure2">5</div>
                    <div class="more">
                        <div>深空彼岸</div>
                        <div>辰东 · 都市 · 484.36万字</div>
                    </div>
                </div>

                <div class="mine">
                    <span>查看更多</span>
                    <span class="iconfont icon-youjiantou"></span>
                </div>

            </div></div>
            <!-- 畅销榜 -->
            <div class="list" id="ran2">
                <div class="ticket">（畅销榜）</div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（1）.webp"></div>
                    <div class="gure">1</div>
                    <div class="more">
                        <div>灵魂行者</div>
                        <div>卖报小郎君 · 科幻 · 265.77万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（2）.webp"></div>
                    <div class="gure">2</div>
                    <div class="more">
                        <div>深空彼岸</div>
                        <div>辰东 · 都市 · 483.56万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（3）.webp"></div>
                    <div class="gure">3</div>
                    <div class="more">
                        <div>光阴之外</div>
                        <div>耳根 · 仙侠 · 209.24万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（7）.webp"></div>
                    <div class="gure2">4</div>
                    <div class="more">
                        <div>火力为王</div>
                        <div>如水意 · 都市 · 231.8万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/1/150 (15).webp"></div>
                    <div class="gure2">5</div>
                    <div class="more">
                        <div>宿命之环</div>
                        <div>爱潜水的乌贼 · 玄幻 · 12.21万字</div>
                    </div>
                </div>
                <div class="mine">
                    <span>查看更多</span>
                    <span class="iconfont icon-youjiantou"></span>
                </div>

            </div>
            <!-- 阅读榜 -->
            <div class="list" id="ran3">
                <div class="ticket">（月票榜）</div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（1）.webp"></div>
                    <div class="gure">1</div>
                    <div class="more">
                        <div>灵魂行者</div>
                        <div>卖报小郎君 · 科幻 · 265.77万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（6）.webp"></div>
                    <div class="gure">2</div>
                    <div class="more">
                        <div>诡秘之主</div>
                        <div>爱潜水的乌贼 · 玄幻 · 446.53万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（3）.webp"></div>
                    <div class="gure">3</div>
                    <div class="more">
                        <div>光阴之外</div>
                        <div>耳根 · 仙侠 · 209.24万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（7）.webp"></div>
                    <div class="gure2">4</div>
                    <div class="more">
                        <div>火力为王</div>
                        <div>如水意 · 都市 · 231.8万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（2）.webp"></div>
                    <div class="gure2">5</div>
                    <div class="more">
                        <div>深空彼岸</div>
                        <div>辰东 · 都市 · 484.36万字</div>
                    </div>
                </div>

                <div class="mine">
                    <span>查看更多</span>
                    <span class="iconfont icon-youjiantou"></span>
                </div>

            </div>
            <!-- 书友榜 -->
            <div class="list" id="ran4">
                <div class="ticket">（畅销榜）</div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（1）.webp"></div>
                    <div class="gure">1</div>
                    <div class="more">
                        <div>灵魂行者</div>
                        <div>卖报小郎君 · 科幻 · 265.77万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（2）.webp"></div>
                    <div class="gure">2</div>
                    <div class="more">
                        <div>深空彼岸</div>
                        <div>辰东 · 都市 · 483.56万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（3）.webp"></div>
                    <div class="gure">3</div>
                    <div class="more">
                        <div>光阴之外</div>
                        <div>耳根 · 仙侠 · 209.24万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（7）.webp"></div>
                    <div class="gure2">4</div>
                    <div class="more">
                        <div>火力为王</div>
                        <div>如水意 · 都市 · 231.8万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/1/150 (15).webp"></div>
                    <div class="gure2">5</div>
                    <div class="more">
                        <div>宿命之环</div>
                        <div>爱潜水的乌贼 · 玄幻 · 12.21万字</div>
                    </div>
                </div>
                <div class="mine">
                    <span>查看更多</span>
                    <span class="iconfont icon-youjiantou"></span>
                </div>

            </div>
            <!-- 推荐榜 -->
            <div class="list" id="ran5">
                <div class="ticket">（月票榜）</div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（1）.webp"></div>
                    <div class="gure">1</div>
                    <div class="more">
                        <div>灵魂行者</div>
                        <div>卖报小郎君 · 科幻 · 265.77万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（6）.webp"></div>
                    <div class="gure">2</div>
                    <div class="more">
                        <div>诡秘之主</div>
                        <div>爱潜水的乌贼 · 玄幻 · 446.53万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（3）.webp"></div>
                    <div class="gure">3</div>
                    <div class="more">
                        <div>光阴之外</div>
                        <div>耳根 · 仙侠 · 209.24万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（7）.webp"></div>
                    <div class="gure2">4</div>
                    <div class="more">
                        <div>火力为王</div>
                        <div>如水意 · 都市 · 231.8万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（2）.webp"></div>
                    <div class="gure2">5</div>
                    <div class="more">
                        <div>深空彼岸</div>
                        <div>辰东 · 都市 · 484.36万字</div>
                    </div>
                </div>

                <div class="mine">
                    <span>查看更多</span>
                    <span class="iconfont icon-youjiantou"></span>
                </div>

            </div>
            <!-- 更新榜 -->
            <div class="list" id="ran6">
                <div class="ticket">（畅销榜）</div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（1）.webp"></div>
                    <div class="gure">1</div>
                    <div class="more">
                        <div>灵魂行者</div>
                        <div>卖报小郎君 · 科幻 · 265.77万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（2）.webp"></div>
                    <div class="gure">2</div>
                    <div class="more">
                        <div>深空彼岸</div>
                        <div>辰东 · 都市 · 483.56万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（3）.webp"></div>
                    <div class="gure">3</div>
                    <div class="more">
                        <div>光阴之外</div>
                        <div>耳根 · 仙侠 · 209.24万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（7）.webp"></div>
                    <div class="gure2">4</div>
                    <div class="more">
                        <div>火力为王</div>
                        <div>如水意 · 都市 · 231.8万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/1/150 (15).webp"></div>
                    <div class="gure2">5</div>
                    <div class="more">
                        <div>宿命之环</div>
                        <div>爱潜水的乌贼 · 玄幻 · 12.21万字</div>
                    </div>
                </div>
                <div class="mine">
                    <span>查看更多</span>
                    <span class="iconfont icon-youjiantou"></span>
                </div>

            </div>
            <!-- 签约榜 -->
            <div class="list" id="ran7">
                <div class="ticket">（月票榜）</div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（1）.webp"></div>
                    <div class="gure">1</div>
                    <div class="more">
                        <div>灵魂行者</div>
                        <div>卖报小郎君 · 科幻 · 265.77万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（6）.webp"></div>
                    <div class="gure">2</div>
                    <div class="more">
                        <div>诡秘之主</div>
                        <div>爱潜水的乌贼 · 玄幻 · 446.53万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（3）.webp"></div>
                    <div class="gure">3</div>
                    <div class="more">
                        <div>光阴之外</div>
                        <div>耳根 · 仙侠 · 209.24万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（7）.webp"></div>
                    <div class="gure2">4</div>
                    <div class="more">
                        <div>火力为王</div>
                        <div>如水意 · 都市 · 231.8万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（2）.webp"></div>
                    <div class="gure2">5</div>
                    <div class="more">
                        <div>深空彼岸</div>
                        <div>辰东 · 都市 · 484.36万字</div>
                    </div>
                </div>

                <div class="mine">
                    <span>查看更多</span>
                    <span class="iconfont icon-youjiantou"></span>
                </div>

            </div>
            <!-- 新书榜 -->
            <div class="list" id="ran8">
                <div class="ticket">（畅销榜）</div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（1）.webp"></div>
                    <div class="gure">1</div>
                    <div class="more">
                        <div>灵魂行者</div>
                        <div>卖报小郎君 · 科幻 · 265.77万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（2）.webp"></div>
                    <div class="gure">2</div>
                    <div class="more">
                        <div>深空彼岸</div>
                        <div>辰东 · 都市 · 483.56万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（3）.webp"></div>
                    <div class="gure">3</div>
                    <div class="more">
                        <div>光阴之外</div>
                        <div>耳根 · 仙侠 · 209.24万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（7）.webp"></div>
                    <div class="gure2">4</div>
                    <div class="more">
                        <div>火力为王</div>
                        <div>如水意 · 都市 · 231.8万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/1/150 (15).webp"></div>
                    <div class="gure2">5</div>
                    <div class="more">
                        <div>宿命之环</div>
                        <div>爱潜水的乌贼 · 玄幻 · 12.21万字</div>
                    </div>
                </div>
                <div class="mine">
                    <span>查看更多</span>
                    <span class="iconfont icon-youjiantou"></span>
                </div>

            </div>
            <!-- 新人榜 -->
            <div class="list" id="ran9">
                <div class="ticket">（月票榜）</div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（1）.webp"></div>
                    <div class="gure">1</div>
                    <div class="more">
                        <div>灵魂行者</div>
                        <div>卖报小郎君 · 科幻 · 265.77万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（6）.webp"></div>
                    <div class="gure">2</div>
                    <div class="more">
                        <div>诡秘之主</div>
                        <div>爱潜水的乌贼 · 玄幻 · 446.53万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（3）.webp"></div>
                    <div class="gure">3</div>
                    <div class="more">
                        <div>光阴之外</div>
                        <div>耳根 · 仙侠 · 209.24万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（7）.webp"></div>
                    <div class="gure2">4</div>
                    <div class="more">
                        <div>火力为王</div>
                        <div>如水意 · 都市 · 231.8万字</div>
                    </div>
                </div>
                <div class="small">
                    <div class="webp"><img src="./first/img/4/300（2）.webp"></div>
                    <div class="gure2">5</div>
                    <div class="more">
                        <div>深空彼岸</div>
                        <div>辰东 · 都市 · 484.36万字</div>
                    </div>
                </div>

                <div class="mine">
                    <span>查看更多</span>
                    <span class="iconfont icon-youjiantou"></span>
                </div>

            </div>
            <!-- 立即登录 -->
            <div class="login">
                <span>登录后获得更多特色功能·</span><a href="###">立即登录</a>
            </div>
            <!-- qq阅读 -->
            <div class="read">
                <div>QQ阅读</div>
                <div>红袖添香</div>
            </div>
            <!--  -->
            <div class="touch">
                <div>客户端</div>
                <div>触屏版</div>
                <div>帮助与客服</div>
                <div>搜索</div>
            </div>
            <!--  -->
            <div class="ser">
                <div>网站备案/许可证号：泸B2-20080046-1</div>
                <div>互联网宗教信息服务许可证 编号：泸（2022）00000022</div>
                <div>copyright© 2022-2023 m.qidian.com</div>
            </div>
        
        <!-- 尾页 -->
        <div class="tail">
            <div class="below">
                <span>下载起点读书，新用户免费读14天</span>
            </div>
        </div>
    </div>
</body>

</html>